import Taro, { Component,useMemo } from '@tarojs/taro'
import {View, Swiper, SwiperItem, Text, Button, Image} from '@tarojs/components'
import {getDouYin} from "../../mode/douyingCtr"
import {IsNullObject} from "../../utils/utils"
import "./myShopPage.scss"
import {AtModal, AtNoticebar} from 'taro-ui'
import {ChangePromotionUrl, GetPromotionDataStr,Tao_haoDao_Ratesurl} from '../../mode/promotionUrlCtr';
import AppStore from '../../store/appStore';
import {getLink} from "../../mode/modeCtr";
import viewUtil from "../../utils/viewUtil";

class MyShopPage extends Component{

  config = {
    navigationBarTitleText: '抖货'
  }

  constructor() {
    super();
    this.state={
      nextPage : 0,
      curDataIndex:0,
      swiperIndex:0,
      isOpened:false,
      Tpwd:'',
      data:[],
      video:[
        {},
        {},
        {}
      ],
    }
  }

  componentWillMount () {
    getDouYin(this.state.nextPage).then((res)=>{
      this.setState({
        nextPage:res.pageIndex,
        curDataIndex:0,
        swiperIndex:0,
        data:res.data,
        item:null,
      },()=>{
        this.RfVideoData()
      })
    })
  }

  getVideoList(num1,num2,num3){
    var  video = this.state.data

    if (num1 < 0){
      num1 = this.state.data.length + num1
    }
    if (num2 < 0){
      num2 = this.state.data.length + num2
    }
    if (num3 < 0){
      num3 = this.state.data.length + num3
    }

    var item = [
      video[num1],
      video[num2],
      video[num3],
      // {dy_video_url:IsNullObject(video[num1])?"":video[num1].dy_video_url,dynamic_image:IsNullObject(video[num1])?"":video[num1].dynamic_image,title:video[num1].itemshorttitle},
      // {dy_video_url:IsNullObject(video[num2])?"":video[num2].dy_video_url,dynamic_image:IsNullObject(video[num2])?"":video[num2].dynamic_image,title:video[num2].itemshorttitle},
      // {dy_video_url:IsNullObject(video[num3])?"":video[num3].dy_video_url,dynamic_image:IsNullObject(video[num3])?"":video[num3].dynamic_image,title:video[num3].itemshorttitle},
    ]
    return item
  }

  RfVideoData(){
    var  swiperIndex = this.state.swiperIndex
    var  curDataIndex = this.state.curDataIndex

    var video0 = Taro.createVideoContext("video0")
    var video1 = Taro.createVideoContext("video1")
    var video2 = Taro.createVideoContext("video2")
    video0.pause()
    video1.pause()
    video2.pause()
    var item = []
    if (swiperIndex === 0 ) {
      item = this.getVideoList(curDataIndex,curDataIndex + 1,curDataIndex -1)
      video0.seek(0)
      video0.play()
    }
    if (swiperIndex === 1 ) {
      item = this.getVideoList(curDataIndex-1,curDataIndex ,curDataIndex +1)
      video1.seek(0)
      video1.play()
    }
    if (swiperIndex === 2 ) {
      item = this.getVideoList(curDataIndex+1,curDataIndex-1 ,curDataIndex)
      video2.seek(0)
      video2.play()
    }
    this.setState({
      video:item
    })
  }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onChangeValue=(e)=>{
    var last_curIndex = this.state.curDataIndex
    var cur = e.detail.current - this.state.swiperIndex
    if (cur ===1 || cur === -2){
      // console.log('上滑')
      last_curIndex = last_curIndex + 1

    }else if (cur === -1 || cur ===2) {
      // console.log('下滑')
      last_curIndex = last_curIndex - 1
    }
    this.setState({
      swiperIndex:e.detail.current,
      curDataIndex: last_curIndex
    },()=>{
      if (last_curIndex +1 > this.state.data.length){
        getDouYin(this.state.nextPage).then((res)=>{
          if (res === null){
            this.setState({
              curDataIndex:0,
            },()=>{
              this.RfVideoData()
            })
          } else {
            const tempData =this.state.data.concat(res.data)
            this.setState({
              nextPage:res.pageIndex,
              data:tempData,

            },()=>{
              this.RfVideoData()
            })
          }
        })
      }else {
        this.RfVideoData()
      }

    })
  }


  handleClose=()=>{}
  handleCancel=()=>{
    this.setState({
      isOpened:false
    })
  }
  handleConfirm=()=>{
    this.setState({
      isOpened:false
    })


    if ( this.state.Tpwd !== ''){
      wx.setClipboardData({
        data:this.state.Tpwd,
        success:function (res) {
          Taro.showToast({title:'复制成功'})
        }
      })
    }
  }

  /**
   * 点击领取直接复制
   * */
  onClickLingquNoOpen=(myItem)=>{
    // console.log(myItem)


    viewUtil.ShowLoading(true,"请求数据中...")
    Tao_haoDao_Ratesurl(myItem.itemid,myItem.itemtitle).then(res=>{
      viewUtil.ShowLoading(false)
      if ( IsNullObject(res)){
        console.log("转高佣失败！")
      }else {
        if (IsNullObject(res.taoword)==false && res.taoword !== ''){
          this.setState({
            isOpened:true,
            Tpwd:res.taoword
          })
        }
      }
    })

  }
  BackToApp=()=>{
    console.log('返回')

  }

  createSwiperItem(item,id){
    return(
      <View>
        <SwiperItem >

          {
            AppStore.appConfig.open >=1 ?(
              <Video
                className={"video1"}
                src={item.dy_video_url}
                controls={true}
                autoplay={false}
                poster={item.dynamic_image}
                initialTime='0'
                id={id}
                loop={true}
                muted={false}
                title={item.itemshorttitle}
                enable-play-gesture={true}
                show-center-play-btn={true}
              >
              </Video>

            ):<View className={'video1'}>
              <Image src={item.itempic}></Image>
            </View>
          }


          <View className={'viewParent'}>
            <View className={'view'}>
              <Text className={'shop'}
              >@{item.shopname}</Text>
              <Text className={'des'}
                    style= {{
                      display: '-webkit-box',
                      overflow: 'hidden',
                      '-webkit-line-clamp': 3,
                      '-webkit-box-orient': 'vertical',
                      color: '#fdfdfd',
                      textOverflow:"ellipsis",
                      fontSize:16,
                      width: "100%",
                      wordBreak:"break-word"
                    }}
              >{item.itemdesc}</Text>
              <View className={'priceParent'}>
                <AtNoticebar className={'AtNoticebar'}  marquee speed={20}>
                  @{item.dy_video_title},{item.itemdesc}
                </AtNoticebar>
                <View className={'juanContain'}>

                  <Text className={'juanhou'}>
                    {
                      appStore.appConfig.open >=1 ?' 卷后价￥':''
                    }

                    <Text className={'juanhou-price'}>
                      {item.itemendprice}
                      <Text className={'juanhou-truePrice'}>
                        ￥{item.itemprice}
                      </Text>

                    </Text>
                  </Text>

                </View>

              </View>

            </View>
            {/*暂时屏蔽云客服操作*/}
            {/*{*/}
            {/*  AppStore.data.appConfig.open === 1 ?  //1 上线  0未上线*/}
            {/*    <Button className={'btn'} openType='contact' onContact={this.BackToApp} onClick={()=>{*/}
            {/*      this.onClickLingquNoOpen(item)*/}
            {/*    }*/}
            {/*    } >*/}
            {/*      <Text className={'btnText'}>领</Text>*/}
            {/*    </Button> :*/}
            {/*    <Button className={'btn'} onClick={()=>{*/}
            {/*      this.onClickLingquNoOpen(item)*/}
            {/*      }*/}
            {/*    } >*/}
            {/*      <Text className={'btnText'}>领</Text>*/}
            {/*    </Button>*/}
            {/*}*/}



          </View>
        </SwiperItem>
      </View>
    )
  }

  render () {
    var sp = this.state.video.length <= 0 ? <View></View> : <View>
      {this.createSwiperItem(this.state.video[0],"video0")}
      {this.createSwiperItem(this.state.video[1],"video1")}
      {this.createSwiperItem(this.state.video[2],"video2")}

      </View>

    return (
        <View className='components-page'>
          {/*</View>*/}
          <Swiper
            className='contain'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            vertical
            circular
            onChange={this.onChangeValue}
            >

            {sp}
          </Swiper>
          {
            AppStore.appConfig.open >=1 ?(
              <Button className={'btn'} onClick={()=>{
                this.onClickLingquNoOpen(this.state.video[this.state.swiperIndex])
              }
              } >
                <Text className={'btnText'}>领</Text>
              </Button>
            ):(<View/>)
          }

          <AtModal
            isOpened={this.state.isOpened}
            title={"复制"}
            cancelText='取消'
            confirmText='复制'
            onClose={ this.handleClose }
            onCancel={ this.handleCancel }
            onConfirm={ this.handleConfirm }
            content={"复制:\n"+this.state.Tpwd+'\n\n\n'+'复制-->打开淘'}
          > </AtModal>

        </View>
    )
  }
}

export  default MyShopPage
